<template>
  <div class="">
    <el-card v-if="!isMobile">
      <el-row>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            placeholder="物料编号" size="medium"
            v-model="queryInfo.materialNumber"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="物料描述"
                    v-model="queryInfo.materialName"
                    clearable>
          </el-input>
        </el-col>

        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="领用单位"
                    v-model="queryInfo.receiveUnit"
                    clearable>
          </el-input>
        </el-col>

        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="项目名称"
                    v-model="queryInfo.projectName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="单位工程名称"
                    v-model="queryInfo.unitEngName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>

<!--        <el-col :span="2"  style="margin-top: 10px">-->
<!--          <el-button  type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-button>-->
<!--        </el-col>-->
<!--        <el-col :span="2"  style="margin-top: 10px">-->
<!--          <el-button    type="primary" icon="el-icon-download" @click="addImoprt">新增导入</el-button>-->
<!--        </el-col>-->
        <el-col :span="2"  style="margin-top: 10px">
          <el-button    type="primary" icon="el-icon-download" @click="exportTransactions">导出</el-button>
        </el-col>
      </el-row>
      <!--表格-->
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'0px'}" :data="outTransactions" border v-loading="loading">
        <el-table-column  label="操作类型" align="center" width="200"   :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{scope.row.operateType.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="repositoryName" label="仓库名称" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="materailName" label="物料描述" :show-overflow-tooltip="true" align="center" >
        </el-table-column>
        <el-table-column prop="materailNumber" label="物料编号" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="qut" label="变更数量" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="unit" label="计量单位" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column  label="出入库类型" align="center" width="200"  :show-overflow-tooltip="true">
          <template slot-scope="scope">
          <span>{{scope.row.outIn.name}}</span>
        </template>
        </el-table-column>

        <el-table-column prop="creatorName" label="出入库责任人" align="center"  :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column prop="createTime" label="操作时间" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[25,50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
        <!-- 手机 -->
    <div class="mobile-box" v-else>
      <el-row>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input
            placeholder="物料编号" size="medium"
            v-model="queryInfo.materialNumber"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="4"  class="mobile-seacher-box" >
          <el-input size="medium"
                    placeholder="物料描述"
                    v-model="queryInfo.materialName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input size="medium"
                    placeholder="领用单位"
                    v-model="queryInfo.receiveUnit"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input size="medium"
                    placeholder="项目名称"
                    v-model="queryInfo.projectName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4"  class="mobile-seacher-box">
          <el-input size="medium"
                    placeholder="单位工程名称"
                    v-model="queryInfo.unitEngName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="2" class="mobile-seacher-box">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>
      </el-row>
      <div >
        <ul v-if="outTransactions.length" v-loading="loading">
          <li class="list-item" v-for="item in outTransactions" :key="item.id">
            <el-card>
              <el-col :span="24">
                <div>操作类型：
                  <span v-if="item.operateType">{{ item.operateType.name }}</span></div>
              </el-col>
              <el-col :span="24">
                <div>仓库名称：{{ item.repositoryName }}</div>
              </el-col>
              <el-col :span="24">
                <div>物料描述：{{ item.materailName }}</div>
              </el-col>
              <el-col :span="24">
                <div>物料编号：{{ item.materailNumber }}</div>
              </el-col>
               <el-col :span="24">
                <div>变更数量：{{ item.qut }}</div>
              </el-col>
              <el-col :span="24">
                <div>计量单位：{{ item.unit }}</div>
              </el-col>
              <el-col :span="24">
                <div>出入库类型：<span v-if="item.outIn">{{ item.outIn.name }}</span></div>
              </el-col>
              <el-col :span="24">
                <div>出入库责任人：{{ item.creatorName }}</div>
              </el-col>
              <el-col >
                <div>操作时间：{{item.createTime}}</div>
              </el-col>
            </el-card>
          </li>
          <el-pagination
            v-if="total >= queryInfo.pageSize"
            style="text-align: center; width: 90%; overflow: auto"
            :disabled="loading"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNo"
            :page-sizes="[25, 50]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </ul>
        <div v-if="!outTransactions.length" class="no-data">
          <img :src="require('../../../assets/noData.jpg')" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pageDeliveryTransaction, exportTransaction } from '@/api/materialScience/deliveryOut.js'
let $this = null
export default {
  name: 'deliveryOutTransaction',
  components: {},
  data () {
    return {
      placeholder: '物料编号',
      loading: false,
      isMobile: false,
      showDetail: false,
      //  手机
      detailData: {},
      queryInfo: {
        pagenum: 1,
        pageSize: 25,
        materailNumber: ''
      },
      total: 2,
      selectY: '',
      selectM: '',
      outTransactions: [],
      importVisible: false,
      importForm: {
        importType: 5,
        fileName: ''
      }
    }
  },
  created () {
    $this = this
    if (this.$utils.isMobile()) {
      this.isMobile = true
    }
    $this.getPageTransaction()
  },
  methods: {
    downloadFile (res, name) {
      const blob = new Blob([res.data])
      const fileName = name + '.xlsx'
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    },
    exportTransactions () {
      exportTransaction($this.queryInfo).then(res => {
        this.downloadFile(res, '出库流水')
      })
    },
    addImoprt () {
      this.importVisible = true
    },
    getPageTransaction () {
      $this.loading = true
      pageDeliveryTransaction($this.queryInfo).then(res => {
        $this.loading = false
        if (res.data.code != 200) {
          return $this.$message.error(res.data.message)
        }
        $this.outTransactions = res.data.data.records
        $this.total = res.data.data.total
      }).catch(err => {
        $this.loading = false
        return $this.$message.error(err.message)
      })
    },
    handleCurrentChange (val) {
      $this.queryInfo.pageNo = val
      $this.getPageTransaction()
    },
    handleSizeChange (size) {
      $this.queryInfo.pageSize = size
      $this.getPageTransaction()
    },
    seacher (key) {
      $this.getPageTransaction()
    },
    // 筛选
    selectTypeY (e) {
      this.selectM = ''
    },
    selectTypeM (e) {
      console.log(e)
      this.selectY = ''
    },
    // 返回table
    closeView () {
      $this.contentView = true
    },
    refreshTable () {
      $this.contentView = true
    },
    // 手机
    // 显示详情
    showDetailFun (item) {
      $this.showDetail = true
      $this.detailData = item
    },
    // 关闭详情弹窗
    closeDetailFun () {
      $this.detailData = {}
      $this.showDetail = false
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin box-width {
    width: 90%;
    margin: 10px auto;
  }
  .mobile-box {
    position: relative;
    .el-row{
      display: flex;
      flex-direction: column;
    }
    .btn-data {
      @include box-width;
    }
    .mobile-seacher-box{
      width: 90%;
      margin: 5px auto;
    }
    ul {
      padding: 0;
      & > li {
        @include box-width;
        list-style-type: none;
        .btn-box {
          text-align: right;
          margin-bottom: 10px;
        }
        .el-col {
          margin: 5px 0;
        }
      }
    }
    .no-data {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 400px;
      }
    }
    .addForm {
      .el-input,
      .el-select,
      .el-textarea{
        width: 100%;
      }
      .el-form-item{
        padding: 0 20px;
        margin-bottom: 10px;
        .btn-box{
          width: 100%;
          text-align: center;
          margin: 20px 0;
          .el-button{
            width: 45%;
          }
        }
      }
    }
    .detail-box{
      overflow: auto;
      div{
        margin: 5px 0;
        font-size: 15px;
      }
    }
  }
</style>
